<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium 3D Tiles Example</title>
    <!-- 引入 Cesium JS -->
    <script src="../lib/cesium/Cesium.js"></script>
    <style>
    @import url(../lib/cesium/widgets.css);
        html,
        body,
        #mainContainer {
            margin: 0;
            padding: 0;
            overflow: hidden;
             height: 1000px;
        }

        #cesiumContainer {
            margin: 0;
            padding: 0;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>

<script type="module">
    // 导入配置类
    import { CesiumAppConfig } from '../js/CesiumAppConfig.js'
    function pageExecute() {
        console.log('pageExecute()');

        window.addEventListener('load', () => {
            console.log('页面加载完成');
            initCesium();
        });

    }

    function printCesiumVersion() {
        console.log('Cesium Version:', Cesium.VERSION);
    }

    // 获取Cesium的token信息
    function getCesiumToken(){
        // const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI4ODUyNmNkNy1lMWI4LTQyNWMtODdjNi1iMmU1NWEwZTMxNmMiLCJpZCI6MzA2MjUyLCJpYXQiOjE3NDgyMzE2MTh9.rYKtbC3bpT7IvG0pTDIbzXSWKxHLgSpbD_NnaW0HZM8';
        const token = CesiumAppConfig.getToken();
        console.log('getCesiumToken() token:' + token);
        return token;
    }

    function initCesium() {
        printCesiumVersion();
        getCesiumToken();
        // Cesium.Ion.defaultAccessToken = getCesiumToken();
        //
        // // 初始化 Cesium Viewer
        // const viewer = new Cesium.Viewer('cesiumContainer');
        //
        // // 这行代码会创建一个Cesium3DTileset实例，该实例的用途是加载和展示 3D 地理空间数据
        // // 参数中的url明确了瓦片集配置文件tileset.json所在的路径。这个配置文件就像是 3D 瓦片数据的 “导航图”，它会指引 Cesium 如何去加载和组织这些瓦片。
        // // new Cesium.Cesium3DTileset()
        //
        //
        // let tileset;
        // try{
        //     tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        //         url : '../data/inclinedMode3DTiles/市民中心3DTiles_01/tileset.json'
        //     }));
        //     // 检查 tileset 是否为 undefined
        //     console.log('tileset:' + tileset);
        // } catch (e) {
        //     console.error('创建瓦片集时出错:', e);
        // }
        //
        //
        // if (!tileset) {
        //     console.error('tileset 为 undefined');
        // }
        //
        // console.log("tileset.readyPromise:" + tileset.readyPromise);
        // if(!tileset.readyPromise){
        //     console.error('tileset.readyPromise 为 undefined');
        // }
        //
        // console.log("tileset.ready:" + tileset.ready);
        //
        // console.log("tileset.readyEvent:" + tileset.readyEvent);

        // if(tileset.ready){
        //     //
        //     console.log('tileset ready');
        //     viewer.zoomTo(tileset);
        // }else{
        //     console.log('tileset will addEventListener');
        //
        //     tileset.readyEvent.addEventListener(function(tileset) {
        //         console.log('tileset ready');
        //         viewer.zoomTo(tileset);
        //     })
        // }




        //
        // // 等待tileset加载完成后再进行操作
        // tileset.readyPromise.then(function() {
        //     // 在这里进行tileset的相关操作，如设置相机位置、获取属性等
        //     viewer.zoomTo(tileset);
        // }).otherwise(function(error) {
        //     // 处理加载错误
        //     console.error('瓦片集加载失败: ', error);
        // });





        // 添加 3D Tiles 数据源
        // const tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        //     url: '../data/inclinedMode3DTiles/市民中心3DTiles_01/tileset.json' // 替换为你的 3D Tiles URL
        // }));
        //
        // tileset.readyPromise.then(function(tileset) {
        //     // 模型加载完成后，调整相机位置以适应模型范围
        //     viewer.zoomTo(tileset);
        // }).otherwise(function(error) {
        //     console.log(error);
        // });
    }

    pageExecute();
</script>
</body>
</html>